


How to style your fic's text

by Threadzless



Category: CSS3, HTML5 - Fandom
Language: English
Status: In-Progress
Published: 2020-04-24
Updated: 2020-04-24
Packaged: 2021-03-01 20:22:29
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 1,458
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/23823028
Author URL: https://archiveofourown.org/users/Threadzless/pseuds/Threadzless
Summary: You know how some stories require colorful text and stylistic flare to have the desired impact? Well, AO3's writing tools let you do that! BUT: it's kinda hard to figure out. Thankfully, I already did that for you and am here to teach you how to do it yourself with (relative) ease!
Kudos: 1





	1. Intro

**Author's Note:**

> [ CONTENT WARNING: Scripting ]  
> (Scripting is like coding but with less time between trial and failure, so it's more efficient for learning)  
> (Don't worry too much, I promise to take it slow, okay?)

Hi!

Would you like to make you fic's POP? Maybe you want to use different colored text for each character so you don't have to keep writing

Tim said "This"

Amber said "That"

Jen said "Whatever"

When a much cleaner way exists:

Tim: This

Amber: That

Jen: Whatever

Maybe someglitched text toindicate a malfunction

Maybe you want to blur the words someone is saying to show how the main character is having trouble hearing them cuz of unconsciousness or timey whimey nonsense (tap or click the bury bit to make it readable). Perhaps you want to change fonts mid sententence to indicate dramatic shift in tone or hide things behind spoiler warnings

If so, then this guide will help you learn how to do those things and more! (Also, there will be a some templates you can use if you don't feel like learning)

If you already know about HTML and CSS, skip to chapter 4. Otherwise, proceed in chapter 2.


	2. WTF is HTML?

**Summary for the Chapter:**

> What is HTML? What does it have to do with fan fics? Why should I care? These questions and maybe others answered

Back in yee olden times when computer whatchamacallits were new fangled and disco was the new thing the hipsters were into the internet was just a bunch of car sized calculators used by research labs and universities to do some math stuff that took too long for anyone to bother to do by hand.

The internet was a cold and heartless place filled with dry research papers in mono space fonts because that was the onl one that existed, and not a single cat meme to be found. Then, one day, some person was all like "hey, this suck donkey ass. let's make it not suck donkey ass cuz that's a thing we can do." And thus, HTML was born. HTML stands for, **H** eavenly **T** rough of **M** olasses **L** icking.

Not really, but HyperText Markup Language isn't exactly a helpful name unless you already know what those words mean and I sure as shit aren't about to google that and you aren't either. So, what does HTML do and why should you give a flaccid fuck, much less a flying one?

The short answer is that HTML is a way to make text have formatting, like **Bold** , _Italics_ , Underline. You can add links to [www.google.com](http://www.google.com) and also other websites if they exist at some point. Further more,

  1. Lists
  2. Tables
  3. Images
  4. Weird symbols
  5. whatever this thing is VVV



* * *

Neat right? Further more, all of those weird text effects I showed off in chapter 1. So how does it work?

Well, HTML is made up of tags, which you put things like words an other tags between to make the tag's effects apply to the stuff inside if.

That was a lot of abstract whatever, so lets try an example. If you wanted to make one word in a sentence be italic, you would write it like this in your fic:

> <i>Shit!</i> he thought with the frustration of a hundred stubbed toes.

and then in you fic, when you click post or preview, you (and other people) will see this:

> _Shit!_ he thought with the frustration of a hundred stubbed toes.

Neat! Let's break that down. <i>...</i> is the **i** talics tag. It makes the text inside of it italic, sometimes called 'slanted'. The <i> is the opening half of the tag, and the </i> is the closing half of the tag. Notice how the closing one has a forward slash just before the letter i. that's what makes it a closing tag instead of another opening tag.

For every opening tag, you must include a closing tag. If you don't, well, AO3 will try to fix it for you by adding all the ones you forgot to the end of your fic and hoping it works out. It often doesn't, and you fic will look bad and might even be unreadable. So keep track of you tags. Every time you write an opening tag you write a closing tag. Same with deletion.

Here's another example:

> <i>Oh no, he's <b>huge!</b></i>

Now what's going on here is that the entire sentence is inside an italics tag (<i>...</i>) but inside of it is another tag, the bold tag (<b>...</b>). This will result in the entire sentence being in italics and the word 'huge' being both bold and italics, like so:

> _Oh no, he's **huge!**_

Like I said before, tags can contain both words and other tags, and their effects compound. However, multiple of the same tags won't compound, at least not when affecting text, most of the time. <b><b>DOUBLE BOLD</b></b> won't make your words twice as bold. There are ways to do that, but they are complicated and probably unnecessary for reasonable writing.

And if you've thinking ahead, yes, <u>...</u> make text underlined. Feel free to take a moment and try writing test fic using these new bolding and italics powers. Just be sure that the _HTML_ button above and to the right of your fic's contents is pressed and not the _Rich Text_ button. Otherwise it won't work. Don't worry, you can switch back and forward between HTML mode and Rich Text mode to see a preview of what you work looks like in real time.

Alright, now it's not like that isn't useful and all, but AO3's Rich Text editor lets you make text bold, italic, and underlined already. You wanna know how to make the colors and the other cool things. I know, I know, I promises we're getting there.

So, one of the cool things about tags is that you can put extra stuff inside them that the computer gets to see but people don't, and those extra things let you do many of the cool things I showed off earlier. We'll start with links because you already know what a link is:

> <a href="http://www.google.com"> Click Here To Go To Google I Guess </a>

Turns into this.

> [Click Here To Go To Google I Guess](http://www.google.com)

The <a>...</a> is for making hyperlinks. They often look like this but can look like anything, and are how most websites make buttons and other things you click to go to a different web page. But what's the other part in between the < and > that's not 'a'? well, that my dear friend is an attribute. ' _href_ ' stands for something or other but it means "when the person clicks on this link, take them to this place on the internet". I don't know why it's called _href_ instead of _link_ or _goto_ or something else sensible but that's what it is and we're stuck with it. The name of the attribute, _href_ in this case, must be immediately followed by an equals sign, then the value of that attribute in between two quotation marks. in this case, the value of _href_ is _http://www.google.com_

If you've spent much time on the internet, you probably know that that looks like a website name. specifically, google's. Yep, that is a URL (Universal Resource Locator) which is a website name and also maybe some more info after a slash which tells you or more specifically your computer exactly where a thing on the internet can be found. You don't really need to know that but its a useful example because you kinda already know what a URL is even if you didn't know what it is called. Oh, and the http:// part at the beginning just means "this is a web page I'm trying to get to and not some other kind of computer thing". Most of the time your web browser just adds it for you if you don't put it there cuz most stuff on the internet is a web page.

Now you might be thinking, is this where we make the colors and whatnot? Sorta...

On normal web pages, you can just put this:

> <font color="red">THIS IS SOME RED TEXT</font>

and get this:

> THIS IS SOME RED TEXT

But... AO3 is not just any website. It's one that allows users to post to stuff to it. So, to protect other users, it does this thing called Input Sanitation, which basically means it cuts out most of the neat stuff you can do with HTML, and makes you do the cool stuff with CSS.

I know this is a pain, but it is more or less essential to keeping the site usable, otherwise someone would mess with the code and possible do stuff to your computer with it, but more likely just make using AO3 a pain. Anyway, in Ch.3 I explain how CSS works and in Ch.4 I show you how to put it together to do the cool stuff.


End file.
